<template>
	<view>
		<div class="user-profile-container">
		    <div class="header">
		      <i class="arrow-left" @click="goBack">&#9664;</i>
		      <span>信息编辑</span>
		    </div>
		    <div class="user-info">
		      <div class="avatar">
		        <img :src="user.avatar" alt="用户头像">
		      </div>
		      <div class="info-item">
		        <label>用户名:</label>
		        <input type="text" @click='touser_Name()' v-model="user.userName" />
		      </div>
		      <div class="info-item">
		        <label>账号:</label>
		        <input type="text" v-model="user.account" />
		      </div>
		      <div class="info-item">
		        <label>手机号:</label>
		        <input type="text" v-model="user.phone" />
		      </div>
		      <div class="info-item">
		        <label>性别:</label>
		        <select class="gender" :value="user.gender" @input="this.user.gender">
		                  <option value="男">男</option>
		                  <option value="女">女</option>
		                  <option value="其他">其他</option>
		        </select>
		      </div>
		      <div class="info-item">
		        <label>地址:</label>
		        <input type="text" v-model="user.address" />
		      </div>
		    </div>
		    <div class="button-group">
		          <button class = "action-button" @click="saveProfile">保存</button>
		          <button class = "action-button" @click="cancelEdit">取消</button>
		    </div>
		  </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
				        avatar: '/static/btn.png',
				        userName: '法外狂徒',
				        account: 'zhangsan123',
				        phone: '13800000000',
				        gender: '男',
				        address: '北京市朝阳区'
				      },
			};
		},
		methods: {
			goBack() {
				history.go(-1);
			      console.log('返回上一页');
			    },
			touser_Name(){
				this.$router.push({
					path:'../userInfo/user_Name',
					//name:'/pages/user/userInfo/user_Name', 
					query: { name: this.user.userName }});
			},
			saveProfile() {
			      console.log('保存用户资料：', this.user);
			      // 在这里实现保存逻辑，例如发送请求到后端
			    },
			cancelEdit() {
			      console.log('取消编辑');
			      // 在这里实现取消逻辑，比如重置用户信息
			      // 你可以考虑再添加一个备份用户数据的逻辑
			    }	
		}
	}
</script>


<style scoped>
.user-profile-container {
  padding: 20px;
}
.header {
  height: 50px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.header i {
  margin-right: 10px;
  cursor: pointer;
}
.arrow-left {
  font-size: 20px; /* 设置箭头的大小 */
  color: #007bff; /* 设置箭头的颜色 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
}
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.info-item {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 10px;
}
label {
  font-weight: bold;
}
.button-group {
  margin-top: 20px;
  display: flex; /* 设置为flex布局 */
  justify-content: center; /* 居中对齐 */
}
.action-button {
  padding: 8px 20px; /* 调整按钮的大小 */
  margin: 0 30px; /* 增加按钮间距 */
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.action-button:hover {
  background-color: #0056b3;
}
.gender{
	margin-right: 79px;
	width: 91px;
}
</style>
	

